<template>
	<el-dialog title="编辑限购商品" :modal-append-to-body="false" :visible.sync="isShow" :close-on-click-modal="false" :before-close="close" width="900px">
		<div class="form-box">
			<el-form ref="form" :model="form" :rules="rules" label-width="110px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="缩略图">
							<el-image style="width: 80px; height: 80px" :src="item.skuThumbImage" :preview-src-list="[item.skuThumbImage]"></el-image>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="24">
						<el-form-item label="商品名称">
							<el-input v-model="item.productName" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="商品编码">
							<el-input v-model="item.productCode" readonly></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="SKU名称">
							<el-input v-model="item.skuName" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="销售价">
							<el-input :value="item.price ? item.price.toFixed(2)+'元' : 0" readonly></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="限购数量" prop="limitQuantity">
							<el-input v-model="form.limitQuantity" placeholder="请输入限购数量" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		
		<div slot="footer">
			<el-button type="primary" @click="submit">保 存</el-button>
			<el-button @click="close">取 消</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import { editPurchaseProduct } from '@api/platform/platformProduct'
	export default {
		props: {
			isShow: Boolean,
			item: Object,
		},
		data() {
			return {
				form: {
					limitQuantity: '',
				},
				rules: {
					limitQuantity: [{ required: true, message: '请输入限购数量', trigger: 'blur' }],
				}
			}
		},
		watch: {
			isShow(val) {
				if(val) {
					this.initForm();
				}
			},
		},
		methods: {
			initForm() {
				this.form.limitQuantity = this.item.limitQuantity;
			},
			
			submit() { //提交添加
				this.$refs.form.validate(valid => {
					if (valid) {
						let params = {
							id: this.item.skuSaleLimitId,
							skuSaleId: this.item.id,
							limitQuantity: this.form.limitQuantity,
						}
						
						editPurchaseProduct(params)
							.then(res => {
								this.$message.success('限购商品编辑成功！');
								this.close();
								
								this.$emit('submit');
							})
					}
				})
			},
			
			reset() {
				this.form.limitQuantity = '';
			},
			close() {
				this.$emit('close');
				this.reset();
			}
		}
	}
</script>

<style>
</style>